//获取试卷并跳转到添加题库
<template>
  <div class="exam">

    <el-button @click="addExamPaper()" type="primary">添加试卷</el-button>
    <el-button @click="importExamPaper()" type="primary">导入试卷</el-button>
    <el-button @click="randomTopic()" type="primary">随机生成</el-button>

    <div id="searchdiv">
      <el-input placeholder="请输入内容" v-model="inputsearch" class="input-with-select">
        <el-select v-model="select" slot="prepend" style="width: 110px;">
          <el-option label="所属课程" :value="1"></el-option>
          <el-option label="出卷老师" :value="2"></el-option>
        </el-select>
        <el-button @click="searchStudent()" slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>

    <div style="height: 10px;"></div>
    <el-table :data="pagination.records" border>
      <el-table-column fixed="left" prop="paperId" label="试卷编号"></el-table-column>
      <el-table-column prop="count" label="总分"></el-table-column>
      <el-table-column prop="course.courseName" label="所属课程"></el-table-column>
      <el-table-column prop="course.user.userName" label="出卷老师"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="showpaper(scope.row.paperId)" type="primary" size="small">查看试卷</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.current"
      :page-sizes="[5, 10]"
      :page-size="pagination.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total" class="page">
    </el-pagination>
    <!-- 随机生成试卷 -->
    <el-dialog
      title="随机生成题目条件"
      :visible.sync="dialogVisible"
      width="20%"
      :before-close="handleClose">
      <section class="update">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="课程">
            <el-select v-model="examPapaer.course.courseId" placeholder="请选择课程" @change="getCourseName(examPapaer.course.courseId)" style="width: 130px;">
              <el-option v-for="(item,index) in course" :key="item+index" :label="item.courseId" :value="item.courseId"></el-option>
            </el-select>
            <el-input style="width: 110px;" id="coursename" disabled="" v-model="courseName"></el-input>
          </el-form-item>
          <el-form-item label="单选题数">
            <el-input-number v-model="chooseone" @change="handleChange" :min="1" :max="10" ></el-input-number>
          </el-form-item>
          <el-form-item label="多选题数">
            <el-input-number v-model="choosemult" @change="handleChange" :min="1" :max="10" ></el-input-number>
          </el-form-item>
          <el-form-item label="判断题数">
            <el-input-number v-model="judge" @change="handleChange" :min="1" :max="10" ></el-input-number>
          </el-form-item>
          <el-form-item label="填空题数">
            <el-input-number v-model="insert" @change="handleChange" :min="1" :max="10" ></el-input-number>
          </el-form-item>
          <el-form-item label="综合题数">
            <el-input-number v-model="textarea" @change="handleChange" :min="1" :max="10" ></el-input-number>
          </el-form-item>
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="randomExam()">生 成</el-button>
      </span>
    </el-dialog>
    <!-- 选题生成试卷 -->
    <el-dialog
      title="创建试卷"
      :visible.sync="dialogVisibleadd"
      width="54%"
      :before-close="handleClose">
      <section class="update">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="课程">
            <el-select v-model="examPapaer.course.courseId" placeholder="请选择课程" @change="getCourseName(examPapaer.course.courseId)" style="width: 180px;">
              <el-option v-for="(item,index) in course" :key="item+index" :label="item.courseId" :value="item.courseId"></el-option>
            </el-select>
            <el-input style="width: 200px;" id="coursename" disabled="" v-model="courseName"></el-input>
          </el-form-item>
          <el-transfer
              v-model="value"
              :data="data"
              :titles="['试题待选','试题已选']"
              >
          </el-transfer>
          <el-transfer
              v-model="value1"
              :data="data1"
              :titles="['选择待选','选择已选']"
              >
          </el-transfer>
        </el-form>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleadd = false">取 消</el-button>
        <el-button type="primary" @click="submitbychoose()">生 成</el-button>
      </span>
    </el-dialog>
    <!-- Excel导入试卷 -->
    <el-dialog
      title="导入"
      :visible.sync="dialogVisibleimp"
      width="25%"
      :before-close="handleClose">
      <section class="update">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="课程">
            <el-select v-model="examPapaer.course.courseId" placeholder="请选择课程" @change="getCourseName(examPapaer.course.courseId)" style="width: 150px;">
              <el-option v-for="(item,index) in course" :key="item+index" :label="item.courseId" :value="item.courseId"></el-option>
            </el-select>
            <el-input style="width: 150px;" id="coursename" disabled="" v-model="courseName"></el-input>
          </el-form-item>
        </el-form>
        <div style="margin-left: 80px;">
          <el-upload
            style="display:inline-block"
            :limit="1"
            class="upload-demo"
            ref="upload"
            accept=".xls,.xlsx"
            action="/api/importExcel"
            :http-request="uploadSectionFile"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary" plain>选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" icon="el-icon-upload2" type="success" @click="submitUpload">生成试卷</el-button>
          </el-upload>
        </div>
      </section>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleimp = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<script>
import qs from 'qs'
export default {
  data() {
    return {
      courseId : 0,
      form: {}, //保存点击以后当前试卷的信息
      pagination: { //分页后的考试信息
        current: 1, //当前页
        total: null, //记录条数
        size: 5 //每页条数
      },
      dialogVisible: false, //编辑信息对话框显示
      dialogVisibleadd: false,
      dialogVisibleimp: false,
      data:[],
      value: [],
      data1:[],
      value1:[],
      filterMethod(query, item) {
        return item.pinyin.indexOf(query) > -1;
      },
      choosemult:1,
      chooseone:1,
      judge:1,
      insert:1,
      textarea:1,
      select:1,
      inputsearch:"",
      course:[],
      examPapaer:{
        course:{
          courseId:""
        },
        papertopics:"",
        paperchoose:""
      },
      courseName:""
    }
  },
  created() {
    this.getExamInfo()
  },
  methods: {
    getExamInfo() { //分页查询所有试卷信息
      this.$axios('/api/exambypage',{
        params: {
          keyword:this.inputsearch,
          select:this.select,
          page:this.pagination.current,
          size:this.pagination.size
        }
      }).then(res => {
        console.log(res.data)
        console.log(res.data.records)
      	this.pagination = res.data;
      }).catch(error => {});
    },
    //改变当前记录条数
    handleSizeChange(val) {
      this.pagination.size = val
      this.getExamInfo()
    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.pagination.current = val
      this.getExamInfo()
    },
    showpaper(paperId) { //增加题库
      console.log(paperId)
      this.$router.push({path:'/showpaper',query: {paperId: paperId}})
    },
    randomTopic() {
      this.dialogVisible=true
      this.getAllCourseId()
    },
    addExamPaper() {
      this.dialogVisibleadd=true
      this.data=[]
      this.data1=[]
      this.value=[]
      this.value1=[]
      this.getAllTopics()
      this.getAllCourseId()
    },
    importExamPaper(){
      this.dialogVisibleimp=true
      this.getAllCourseId()
    },
    handleClose(done) { //关闭提醒
      this.$confirm('确认关闭？')
        .then(_ => {
          this.form = {} // 关闭框后清空值
          done();
        }).catch(_ => {});
    },
    handleChange(value) {
      console.log(value);
    },
    searchStudent(){
      this.getExamInfo()
    },
    getAllTopics(){
      this.$axios('/api/getalltopicsingle').then(res => {
         console.log(res.data)
         for(var i = 0; i < res.data.length; i++){
           this.data.push({
             id:res.data[i].topicId,
             label:res.data[i].topicName,
             key:res.data[i].topicId
           })
         }
         console.log(this.data)
      }).catch(error => {});

      this.$axios('/api/getalltopicmult').then(res => {
         console.log(res.data)
         for(var i = 0; i < res.data.length; i++){
           this.data1.push({
             id:res.data[i].chooseId,
             label:res.data[i].chooseName,
             key:res.data[i].chooseId
           })
         }
      }).catch(error => {});
    },
    submitbychoose(){
      var topic = "";
      var choose = "";
      for(var i=0;i<this.value.length;i++){
        topic = topic+this.value[i]+","
      }
      for(var i=0;i<this.value1.length;i++){
        choose = choose+this.value1[i]+","
      }
      this.examPapaer.papertopics=topic
      this.examPapaer.paperchoose=choose

      console.log(this.examPapaer)
      if(this.examPapaer.course.courseId == ""){
        this.$confirm("请选择课程!")
      }else{
        this.$axios({
          url: '/api/generatepaper',
          method: 'post',
          data: {
            ...this.examPapaer
          }
        }).then(res => {
          if(res.data == 200){
            this.$message({
              message: '生成试卷成功',
              type: 'success'
            })
            this.getExamInfo()
          }
        }).catch(error => {});
      }
    },
    randomExam(){
      if(this.examPapaer.course.courseId == ""){
        this.$message({message:"请选择课程!",type:"error"})
      }else{
        this.$axios('/api/randgenerate',{
          params:{
            courseId:this.examPapaer.course.courseId,
            num1:this.judge,
            num2:this.insert,
            num3:this.textarea,
            num4:this.chooseone,
            num5:this.choosemult
          }
        }).then(res => {
          if(res.data == 200){
            this.$message({
            	message: '生成试卷成功',
            	type: 'success'
            })
            this.getExamInfo()
          }
        }).catch(error => {});
      }

    },
    getCourseName(CourseId){  //根据课程编号获取课程名 ✔
      this.$axios('/api/course/getCouById/'+CourseId).then(res => {
        this.courseName = res.data
      })
    },
    getAllCourseId(){ //获取所有课程编号 ✔
      this.$axios('/api/course/getCouAll').then(res => {
          this.course = res.data
      })
    },
    submitUpload() {
       let list = document.getElementsByClassName('el-upload-list__item is-ready')
       if(list.length == 0){
         this.$message({
           type:'warning',
           message:"请选择需要导入的文件！"
         })
         return;
       }
       this.$refs.upload.submit();
     },
     uploadSectionFile(param){
       var fileObj = param.file;
       // FormData 对象
       var form = new FormData();
       // 文件对象
       form.append("file", fileObj);
       form.append("courseId", this.examPapaer.course.courseId);
       let config = {
         headers: {"Content-Type":"multipart/form-data"}
       }
       if(this.examPapaer.course.courseId == ""){
         this.$confirm("请选择课程!")
       }else{
         this.$axios.post('/api/importexcel',form,config)
         .then(res => {
          if(res.data == 200){
            this.$message({
              message: '生成试卷成功',
              type: 'success'
            })
           this.getExamInfo()
          }else{
            this.$message({
              message: '生成文件失败',
              type: 'error'
            })
          }
        }).catch(error => {});
       }
     },
  },
};
</script>
<style lang="scss" scoped>
.exam {
  padding: 0px 40px;
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .edit{
    margin-left: 20px;
  }
}

#searchdiv{
  width: 400px;
  display: inline-block;
  margin-left: 835px;
}

</style>
